 <!DOCTYPE html>
 <html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    
    <!-- 富文本编辑器 -->
	<link rel="stylesheet" href="../plugins/kindeditor/themes/default/default.css" />
	<script charset="utf-8" src="../plugins/kindeditor/kindeditor-min.js"></script>
	<script charset="utf-8" src="../plugins/kindeditor/lang/zh_CN.js"></script>
	<!-- 引入 bootstrap-fileinput -->
	<script type="text/javascript" src="../bootstrap-fileinput/js/fileinput.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../bootstrap-fileinput/css/fileinput.min.css">
	<script type="text/javascript" src="../bootstrap-fileinput/js/locales/zh.js"></script>
    <script type="text/javascript">
		//三级联动,获取二级
		function getTow(id) {
			$.ajax({
				url:"/goods/getTow",
				data:{parentId:id},
				type:"post",
				dataType:"json",
				async:false,
				success:function(result){
					if(result.code == 200){
						var itemCat=result.data;
						var table="<option value='-1'>请选择</option>";
						$(itemCat).each(function (i,v) {
							table += "<option value='"+ v.id +"'>"+v.name+"</option>";
						})
						$("#tow").html(table);
						$("#three").html("<option value='-1'>请选择</option>");
					}else {
						alert(result.message)
					}
				},
				error:function(result){
					alert("系统异常，请联系管理员！")
				}
			});
		}
		//获取三级
		function getThree(id) {
			$.ajax({
				url:"/goods/getTow",
				data:{parentId:id},
				type:"post",
				dataType:"json",
				async:false,
				success:function(result){
					if(result.code == 200){
						var itemCat=result.data;
						var table="<option value='-1'>请选择</option>";
						$(itemCat).each(function (i,v) {
							table += "<option value='"+ v.id +"'>"+v.name+"</option>";
						})
						$("#three").html(table);
					}else {
						alert(result.message)
					}
				},
				error:function(result){
					alert("系统异常，请联系管理员！")
				}
			});
		}
		//从商品分类表中获取模板id
		function getTypeId(id) {
			$.ajax({
				url:"/goods/getTypeIdById",
				data:{id:id},
				type:"post",
				dataType:"json",
				async:false,
				success:function(result){
					if(result.code == 200){
						var itemCatById=result.data;
						var typeId = itemCatById.typeId;

						$("#typeTemplateId").prop("value",typeId);
						selectTypeTemplate(typeId);
					}else {
						alert(result.message)
					}
				},
				error:function(result){
					alert("系统异常，请联系管理员！")
				}
			});
		}
		//通过模板id获取品牌 扩展属性 规格
		function selectTypeTemplate(id) {
			$.ajax({
				url:"/goods/selectTypeTemplateById",
				data:{id:id},
				type:"post",
				dataType:"json",
				async:false,
				success:function(result){
					if(result.code == 200){
						var typeTemplateById=result.data;
						//将查询到的品牌字符串转换为对象
						var brandIds=JSON.parse(typeTemplateById.brandIds);

						var table='<option value="-1">请选择</option>';
						$(brandIds).each(function (i,v) {
							table +='<option value="'+v.id+'">'+v.text+'</option>';
						})
						$("#brandId").html(table);
                        //将查询到的扩展属性字符串转换为对象
                        var customAttributeItems = JSON.parse(typeTemplateById.customAttributeItems);

                        var table2 = "";
                        $(customAttributeItems).each(function (i,v) {
                            table2 += "<div name='customAttributeItems'><div class='col-md-2 title'>"+v.text+"</div>";
                            table2 += "<div class='col-md-10 data'><input class='form-control'  placeholder='"+v.text+"'>";
                            table2 += "</div></div>";
                        })
                        $("#customAttributeItemsId").html(table2);
                        //将查询到的规格属性字符串转换为对象
                        var specIds=JSON.parse(typeTemplateById.specIds);
                        var table3 = "";
                        $(specIds).each(function (i,v) {
                            table3 +='<div><div class="col-md-2 title">'+
                                "<input style='text-align:center;vertical-align:middle; border: none; outline: none; " +
                                "background: #ececec' readonly='readonly' name='spetext' value='"+v.text+"'>"+'</div>';
                            table3 +='<div class="col-md-10 data">';
                            //用模板表 specIds 字段中的id 查询规格表
							getSpecificationOptionBySpecIds(v.id);
                            $(value).each(function (i,v) {
                                table3 +='<span>';
                                table3 +='<input  type="checkbox" name="speValue" value="'+v.optionName+'">'+v.optionName+'';
                                table3 +='</span>';
                            })
                            table3 +='</div>';
                            table3 +='</div>';
                        })
                        $("#specIds").html(table3);

					}else {
						alert(result.message)
					}
				},
				error:function(result){
					alert("系统异常，请联系管理员！")
				}
			});
		}
        //用模板表 specIds 字段中的id 查询规格表
		function getSpecificationOptionBySpecIds(specId) {
            $.ajax({
                url:"/goods/getSpecificationOptionBySpecIds",
                data:{specId: specId},
                type:"post",
                dataType:"json",
                async:false,
                success:function(result){
                    if(result.code == 200){
                        var data=result.data;
                        value = data;
                    }else {
                        alert(result.message)
                    }
                },
                error:function(result){
                    alert("查询规格表系统异常，请联系管理员！")
                }
            });
        }
		//增加操作
        function addGoods() {
			alert("进去增加操作");
		    /*商品基本信息页*/
            var category1Id = $("#one").val();
            var category2Id = $("#tow").val();
            var category3Id = $("#three").val();
            //模板id，商品名称，品牌id，副标题，价格
            var typeTemplateId = $("#typeTemplateId").val();
            var goodsName = $("#goodsName").val();
            var brandId = $("#brandId").val();
            var caption = $("#caption").val();
            var price = $("#price").val();
            //商品介绍----编辑器
            //实例化编辑器对象
            editor.sync();
            //获取编辑器中输入的内容，这里我使用了id选择器去得到textarea
            var introduction = $("#introduction").val();
            //获取包装列表
            var packageList = $("#packageList").val();
            //获取售后服务
            var saleService = $("#saleService").val();

			/*获取商品图片*/
			var itemImagesStr = [];
			var color1 = $("[name='color1']");
			var url1 = $("[name='url1']");
			for (var i=0;i<url1.length;i++){
				var color=color1[i].value;
				var url=url1[i].value;
				var imgColor={color:color,url:url};
				//将获取的值赋值给text
				itemImagesStr.push(imgColor);
			}
			var itemImages = JSON.stringify(itemImagesStr);

			//获取拓展属性
			var customStr = [];
			//获取拓展属性值
			var customAttributeItemsId=$("[name=customAttributeItems]");
			$(customAttributeItemsId).each(function(i,v){
				var text = $(v).find("input").attr("placeholder");
				var value = $(v).find("input").val();
				var div={text:text,value:value};
				customStr.push(div);
			})
			var customAttributeItems=JSON.stringify(customStr);


			//获取规格名和规格值
			var specificationItems = '[{"attributeName":"网络","attributeValue":["移动4G","联通3G"]},{"attributeName":"机身内存","attributeValue":["16G","32G"]}]';			//价格库存1
			var priceOne = $("#priceIdOne").val();
			var numOne = $("#numIdOne").val();
			//价格库存2
			var priceTow = $("#priceIdTow").val();
			var numTow = $("#numIdTow").val();

			//读取元素的纯文本内容
			var category=$("#three").text().substring(3);
			var brand=$("#brandId").text().substring(3);

			var title1 = goodsName+' 移动4G 16G';
			var itemList = '[';
			var item1 = '{"title":"'+title1+'","sellPoint":"'+caption+'","price":"'+priceOne+'",' +
					'"num":"'+numOne+'","image":"'+url+'","categoryId":"'+category3Id+'","category":"'+category+'",' +
					'"brand":"'+brand+'","spec":{"网络":"移动4G","机身内存":"16G"}},';
			itemList += item1;
			//拼接第二个商品的title(sku名称)
			var title2 = goodsName+' 联通3G 32G';
			var item2 = '{"title":"'+title2+'","sellPoint":"'+caption+'","price":"'+priceTow+'","num":"'+numTow+'",' +
					'"image":"'+url+'","categoryId":"'+category3Id+'","category":"'+category+'","brand":"'+brand+'",' +
					'"spec":{"网络":"联通3G","机身内存":"32G"}}';
			itemList += item2;
			//拼接第三个商品的title(sku名称)
			var title3 = goodsName+' 联通3G 16G';
			var item3 = '{"title":"'+title3+'","sellPoint":"'+caption+'","price":"'+priceTow+'","num":"'+numTow+'",' +
					'"image":"'+url+'","categoryId":"'+category3Id+'","category":"'+category+'","brand":"'+brand+'",' +
					'"spec":{"网络":"联通3G","机身内存":"16G"}}';
			itemList += item3;
			//拼接第四个商品的title(sku名称)
			var title4 = goodsName+' 移动4G 32G';
			var item4 = '{"title":"'+title4+'","sellPoint":"'+caption+'","price":"'+priceTow+'","num":"'+numTow+'",' +
					'"image":"'+url+'","categoryId":"'+category3Id+'","category":"'+category+'","brand":"'+brand+'",' +
					'"spec":{"网络":"移动4G","机身内存":"32G"}}';
			itemList += item4+']';

			alert("执行ajax");
            $.ajax({
                url:"/goods/addGoodsAndGoodsDesc",
                data:{
                    category1Id:category1Id,
                    category2Id:category2Id,
                    category3Id:category3Id,
                    typeTemplateId:typeTemplateId,
                    goodsName:goodsName,
                    brandId:brandId,
                    caption:caption,
                    price:price,
                    introduction:introduction,
                    packageList:packageList,
                    saleService:saleService,
					itemImages:itemImages,
					customAttributeItems:customAttributeItems,
					specificationItems:specificationItems,
					itemList:itemList
                },
                type:"post",
                dataType:"json",
                async:false,
                success:function(result){
                    alert(result.message);
                    window.location.reload();
                },
                error:function(result){
                    alert("系统异常，请联系管理员！")
                }
            });
        }
        
        //增加图片操作
		function addImage() {

			//获取颜色
			var color = $("#color").val();
			var url = $("#fileAddr").val();
			var img="";
            img+="<tr><td>";
            img+="<input name='color1' style='border: none;outline: none;background: #ececec' readonly='readonly ' value='"+color+"'></td>";
            img+="<td><img  src='"+url+"'   width='100px' height='100px'>";
            img+="<input  type='hidden' value='"+url+"' name='url1'></td>";
            img+="<td> <button type='button' class='btn btn-default' title='删除' onclick='deleteImg(this)'><i class='fa fa-trash-o'></i> 删除</button></td>";
            img+="</tr>";
			$("#image").append(img);
		}
        //删除图片
        function deleteImg(obj){
            var tr = $(obj).parent().parent();
            tr.remove();
        }
		//初始化上传插件 及上传路径和回显配置
		function fileInit(){
			$('#myFile').fileinput({
				language: 'zh',
				uploadUrl: '/goods/upload',
				maxFileCount :3, // multiple
				enctype : 'multipart/form-data',
				maxFileSize : 1024, //单位为kb
				allowedFileExtensions : ['jpg', 'gif', 'png'],//限制上传文件类型
				browseClass: 'btn btn-primary'
			});
			$('#myFile').on('fileuploaded',function(event, data, previewId, index){
				//data.response获取的就是后台return 的对象
				var result = data.response;
				var url = result.data;
				$("#fileAddr").val(url);
			})
		}
		$(function () {
            fileInit();
        })
        function yesOrNo(obj) {
            if (obj.checked){
                //选中显示内容
                $("#checkedId").show();
            }else {
                //不选中隐藏内容
                $("#checkedId").hide();
            }
        }
	</script>
    
      
    
    
</head>

<body class="hold-transition skin-red sidebar-mini" >

            <!-- 正文区域 -->
            <section class="content">

                <div class="box-body">

                    <!--tab页-->
                    <div class="nav-tabs-custom">

                        <!--tab头-->
                        <ul class="nav nav-tabs">                       		
                            <li class="active">
                                <a href="#home" data-toggle="tab">商品基本信息</a>                                                        
                            </li>   
                            <li >
                                <a href="#pic_upload" data-toggle="tab">商品图片</a>                                                        
                            </li>    
                            <li >
                                <a href="#customAttribute" data-toggle="tab">扩展属性</a>                                                        
                            </li>     
                            <li >
                                <a href="#spec" data-toggle="tab" >规格</a>                                                        
                            </li>                       
                        </ul>
                        <!--tab头/-->
						
                        <!--tab内容-->
                        <div class="tab-content">

                            <!--表单内容-->
                            <div class="tab-pane active" id="home">
                                <div class="row data-type">                                  
								   <div class="col-md-2 title">商品分类</div>
		                          
		                           	  <div class="col-md-10 data">
		                           	  	<table>
		                           	  		<tr>
		                           	  			<td>
		                           	  				<select class="form-control" th:id="one" onchange="getTow(this.value)">
														<option value="-1">请选择</option>
														<option th:each="item : ${itemCatList}" th:value="${item.id}">[[${item.name}]]</option>
		                           	  				</select>
		                              			</td>
		                              			<td>
		                           	  				<select class="form-control select-sm" th:id="tow" onchange="getThree(this.value)"></select>
		                              			</td>
		                              			<td>
		                           	  				<select class="form-control select-sm" th:id="three" onchange="getTypeId(this.value)"></select>
		                              			</td>
		                              			<td>
		                           	  				模板ID:<input th:id="typeTemplateId">
		                              			</td>
		                           	  		</tr>
		                           	  	</table>
		                              	
		                              </div>	                              
		                          	  
									
		                           <div class="col-md-2 title">商品名称</div>
		                           <div class="col-md-10 data">
		                               <input type="text" class="form-control"  th:id="goodsName" placeholder="商品名称">
		                           </div>
		                           
		                           <div class="col-md-2 title">品牌</div>
		                           <div class="col-md-10 data">
		                              <select class="form-control" th:id="brandId"></select>
		                           </div>
		
								   <div class="col-md-2 title">副标题</div>
		                           <div class="col-md-10 data">
		                               <input type="text" class="form-control" th:id="caption" placeholder="副标题">
		                           </div>
		                           
		                           <div class="col-md-2 title">价格</div>
		                           <div class="col-md-10 data">
		                           	   <div class="input-group">
			                          	   <span class="input-group-addon">¥</span>
			                               <input type="text" class="form-control"  placeholder="价格" th:id="price">
		                           	   </div>
		                           </div>
		                           
		                           <div class="col-md-2 title editer">商品介绍</div>
                                   <div class="col-md-10 data editer">
                                       <textarea th:id="introduction" name="content" style="width:800px;height:400px;visibility:hidden;"></textarea>
                                   </div>
		                           
		                           <div class="col-md-2 title rowHeight2x">包装列表</div>
		                           <div class="col-md-10 data rowHeight2x">
		                               
		                           	<textarea rows="4"  class="form-control" th:id="packageList"  placeholder="包装列表"></textarea>

		                           </div>
		                           
		                           <div class="col-md-2 title rowHeight2x">售后服务</div>
		                           <div class="col-md-10 data rowHeight2x">
		                               <textarea rows="4"  class="form-control" th:id="saleService" placeholder="售后服务"></textarea>
		                           </div>                        
                                  
                                    
                                </div>
                            </div>
 <!----------------------------------------------------------商品基本信息---------------------------------------------->
                            <!--图片上传-->
                            <div class="tab-pane" id="pic_upload">
                                <div class="row data-type">                                  
								 <!-- 颜色图片 -->
								 <div class="btn-group">
					                 <button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"  data-toggle="modal"  ><i class="fa fa-file-o"></i> 新建</button>
                             		                 
					             </div>
								 
								 <table class="table table-bordered table-striped table-hover dataTable">
					                    <thead>
					                        <tr>
					                            
											    <th class="sorting">颜色</th>
											    <th class="sorting">图片</th>
												<th class="sorting">操作</th>
							            </thead>
					                    <tbody th:id="image">

					                    </tbody>
								 </table> 
								  
                                </div>
                            </div>
                           
                           
                            <!--扩展属性-->
                            <div class="tab-pane" id="customAttribute">
                                <div class="row data-type" th:id="customAttributeItemsId">
                                </div>
                            </div>
                      
                            <!--规格-->
                            <div class="tab-pane" id="spec">
                            	<div class="row data-type">
	                            	<div class="col-md-2 title">是否启用规格</div>
			                        <div class="col-md-10 data">
			                        	<input type="checkbox" onclick="yesOrNo(this)" >			                           
			                        </div>
                            	</div>
                            	<p>
                            	
                            	<div th:id="checkedId">
                            	
	                                <div class="row data-type" th:id="specIds">
                                        <!--屏幕尺寸-->

		                                </div>  
		                                                                                  
	                                </div>
	
	                                
	                                <div class="row data-type">
	                                	 <table class="table table-bordered table-striped table-hover dataTable">
						                    <thead>
						                        <tr>					                          
												    <th class="sorting">网络</th>
													<th class="sorting">机身内存</th>
												    <th class="sorting">价格</th>
												    <th class="sorting">库存</th>
												    <th class="sorting">是否启用</th>
												    <th class="sorting">是否默认</th>
											    </tr>
								            </thead>
						                    <tbody>
						                      <tr>					                           
										            <td>
										            	移动3G
										            </td>
													<td>
										            	16G
										            </td>
										            <td>
										           		<input class="form-control"  placeholder="价格" th:id="priceIdOne">
										            </td>
										            <td>
										            	<input class="form-control" placeholder="库存数量" th:id="numIdOne">
										            </td>
										            <td>
										             	<input type="checkbox" checked="checked">
										            </td>
										            <td>
										                <input type="checkbox" checked="checked">
										            </td>
						                      </tr>
											  <tr>					                           
										            <td>
										            	联通3G
										            </td>
													<td>
										            	32G
										            </td>
										            <td>
										           		<input class="form-control"  placeholder="价格" th:id="priceIdTow">
										            </td>
										            <td>
										            	<input class="form-control" placeholder="库存数量" th:id="numIdTow">
										            </td>
										            <td>
										             	<input type="checkbox" checked="checked">
										            </td>
										            <td>
										                <input type="checkbox" checked="checked">
										            </td>
						                      </tr>

											  
						                    </tbody>
									 	</table>
								
	                                </div>
	                                
	                            </div>
                            </div>
                            
                        </div>
                        <!--tab内容/-->
						<!--表单内容/-->
							 
                    </div>

                   </div>
                  <div class="btn-toolbar list-toolbar">
				      <button class="btn btn-primary" onclick="addGoods()"><i class="fa fa-save"></i>保存</button>
				      <button class="btn btn-default" >返回列表</button>
				  </div>
			
            </section>
            
            
<!-- 上传窗口 -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">上传商品图片</h3>
		</div>
		<div class="modal-body">							
			
			<table class="table table-bordered table-striped">
		      	<tr>
		      		<td>颜色</td>
		      		<td><input  class="form-control" th:id="color" placeholder="颜色" >  </td>
		      	</tr>			    
		      	<tr>
		      		<td>商品图片</td>
		      		<td>
						<table>
							<tr>
								<td>
									<label class="control-label" for="myFile">上传图片</label><!--multiple 支持多文件上传  不加这个只能上传一个文件  -->
									<input type="file" id="myFile" name="myFile" multiple />
									<input type="text" id="fileAddr">
								</td>
							</tr>						
						</table>
		      		</td>
		      	</tr>		      	
			 </table>				
			
		</div>
		<div class="modal-footer">						
			<button class="btn btn-success"  data-dismiss="modal" onclick="addImage()" aria-hidden="true">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>

            
            <!-- 正文区域 /-->
<script type="text/javascript">

	var editor;
	KindEditor.ready(function(K) {
		editor = K.create('textarea[name="content"]', {
			allowFileManager : true
		});
	});

</script>
       
</body>

</html>